<template>
  <view class="page">
    <view
      class="uni-list"
      :class="{ 'uni-list-mb': !quesItem.mb0 }"
      v-for="quesItem in list"
      :key="quesItem.key"
    >
      <view class="uni-list-title">
        <text v-if="quesItem.required" class="fail">*</text>
        {{ quesItem.title }}：
      </view>
      <!-- 单选 -->
      <radio-group
        v-if="quesItem.type === 'radio'"
        @change="dataChange($event, quesItem)"
        :value="quesItem.value"
      >
        <view
          class="uni-list-cell uni-list-cell-pd"
          v-for="(item, index) in quesItem.items"
          :key="index"
        >
          <label>
            <radio
              :checked="item.value === quesItem.value"
              :value="item.value"
              :disabled="quesItem.disabled || item.disabled"
              color="#4C8FFF"
              class="left10"
            />
            {{ item.label }}
          </label>
        </view>
      </radio-group>

      <!-- 输入框 -->
      <view
        v-if="quesItem.type === 'input-text'"
        class="uni-list-cell uni-list-cell-pd"
      >
        <input
          style="width: 100%;"
          :disabled="quesItem.disabled"
          :value="quesItem.value"
          :placeholder="quesItem.placeholder || quesItem.title"
          @change="inputChange($event, quesItem)"
        />
      </view>

      <!-- 输入框 -->
      <view
        v-if="quesItem.type === 'input-area'"
        class="uni-list-cell uni-list-cell-pd"
      >
        <textarea
          style="width: 100%;"
          :disabled="quesItem.disabled"
          :maxlength="250"
          :value="quesItem.value"
          :placeholder="quesItem.placeholder || quesItem.title"
          @input="inputChange($event, quesItem)"
        />
      </view>

      <!-- 复选 -->
      <checkbox-group
        v-if="quesItem.type === 'checkbox'"
        @change="dataChange($event, quesItem)"
      >
        <view
          class="uni-list-cell uni-list-cell-pd"
          v-for="(item, index) in quesItem.items"
          :key="index"
        >
          <label>
            <checkbox
              :checked="
                (quesItem.value && quesItem.value.includes(item.value))
              "
              :disabled="quesItem.disabled || item.disabled"
              :value="item.value"
              color="#4C8FFF"
              class="left10"
            />
            {{ item.label }}
          </label>
        </view>
      </checkbox-group>

      <!-- 详情 -->
      <view
        v-if="quesItem.type === 'detail'"
        class="uni-list-cell uni-list-cell-pd real-top"
      >
        {{ quesItem.value }}
      </view>

      <!-- 地区 -->
      <view
        v-if="quesItem.type === 'pickArea'"
        class="uni-list-cell uni-list-cell-pd"
      >
        <view @click="showPick(quesItem, 'address')">
          <input
            :value="quesItem.value"
            style="width: 100%;"
            maxlength="30"
            :placeholder="quesItem.placeholder || quesItem.title"
            disabled
          />
        </view>
      </view>

      <!-- 日期 -->
      <view
        v-if="quesItem.type === 'pickDate'"
        class="uni-list-cell uni-list-cell-pd"
      >
        <view @click="showPick(quesItem, 'date')">
          <input
            :value="quesItem.value"
            disabled
            style="width: 100%;"
            maxlength="30"
            :placeholder="quesItem.placeholder || quesItem.title"
          />
        </view>
      </view>

      <!-- 选择 -->
      <mySelect
        v-if="quesItem.type === 'select'"
        :placeholder="quesItem.placeholder"
        :value="quesItem.value"
        :options="quesItem.items"
        :field="quesItem.field"
        @change="selectChange($event, quesItem)"
        :ref="'select-' + quesItem.key"
      >
        <template #default="{ label }">
          <view class="uni-list-cell uni-list-cell-pd">
            <input
              :value="label"
              disabled
              style="width: 100%;"
              maxlength="30"
              :placeholder="quesItem.placeholder || quesItem.title"
            />
          </view>
        </template>
      </mySelect>
    </view>

    <slot name="submit-bottom">
      <view v-if="!isHideSubmitBtn" class="see-result">
        <button
          :class="{ 'circle-btn': btnType === 'circle' }"
          :disabled="loading"
          @tap="submit"
          :loading="loading"
        >
          提交
        </button>
      </view>
    </slot>

    <w-picker
      mode="region"
      startYear="2005"
      themeColor="#4C8FFF"
      ref="address"
      @confirm="handleConfirmAddress"
    />
    <w-picker
      mode="date"
      fields="day"
      themeColor="#4C8FFF"
      ref="date"
      @confirm="handleConfirmTime"
    />
  </view>
</template>

<script>
import wPicker from '@/components/w-picker/w-picker.vue';
import chooseAdress from '@/components/chooseAdress/chooseAdress';
import mySelect from './components/mySelect';
import uUtils from 'cqc-heren-util';
let cacheItem = null;
/*
  修改值调用 setValue(item, newValue, 'no-emit') 方法
  event:
    change
    submit

  slot:
    submit-bottom
*/

export default {
  components: {
    wPicker,
    chooseAdress,
    mySelect,
  },

  props: {
    list: {
      type: Array,
      default: () => [
        {
          title: '这个是详情',
          type: 'detail',
          key: 'detail222',
          value: '这个是详情这个是详情这个是详情',
          mb0: true, // 不要有间隔
        },

        {
          title: '选择器',
          type: 'select',
          // required: true,
          value: '',
          placeholder: '请选择患者证件类型',
          key: 'key2',
          // 对应 items
          field: {
            value: 'value',
            label: 'label',
          },
          items: [
            {
              label: '身份证',
              value: '1',
            },
            {
              label: '住院号',
              value: '2',
            },
          ],
        },
        {
          title: '近28天内有无出入境史',
          items: [
            { value: '有', label: '有' },
            { value: '无', label: '无' },
          ],
          type: 'radio',
          value: '有',
          key: 'radio1',

          required: true, // 与 emptyMsg 配合
          emptyMsg: '值不能为空',

          reg: /^[a-zA-Z]\d$/.toString(), // 与 regMsg 配合(以字符串形式传入， 特殊符号要有转义符:  ^\\s*$), 只有value值是字符串时候有效
          regMsg: '正则校验失败',
        },
        {
          title: '主要症状',
          items: [
            { value: '发热', label: '发热' },
            { value: '发热2', label: '发热2' },
            { value: '发热3', label: '发热3' },
          ],
          value: ['发热'],
          type: 'checkbox',
          key: 'checkbox1',
        },
        {
          title: '请选择省市区',
          type: 'pickArea',
          key: 'area1',
          value: '',
        },
        {
          title: '请选择日期',
          type: 'pickDate',
          key: 'pickDate1',
          value: '',
        },
        {
          title: '请输入详细地址',
          type: 'input-text',
          key: 'input1',
          value: '',
          required: true,
          emptyMsg: '请填写**xxx*',
        },
        {
          title: '请输入详细地址2',
          type: 'input-area',
          key: 'input2',
          value: '',
        },
      ],
    },

    isHideSubmitBtn: {
      type: Boolean,
      default: false,
    },

    loading: {
      type: Boolean,
      default: false,
    },

    btnType: {
      type: String,
      default: 'square', // circle | square
    },
  },

  methods: {
    showPick(item, name) {
      const { disabled } = item;
      if (!disabled) {
        this.$refs[name].show();
        cacheItem = item;
      }
    },

    handleConfirmAddress(val) {
      this.pickedValue(val);
    },

    handleConfirmTime(val) {
      this.pickedValue(val);
    },

    pickedValue(val) {
      const { result } = val;
      this.setValue(cacheItem, result);
      cacheItem = null;
    },

    selectChange({ label, value }, item) {
      this.setValue(item, value);
    },

    dataChange(e, item) {
      const v = e.detail.value;
      this.setValue(item, v);
    },

    inputChange({ detail: { value } }, item) {
      this.setValue(item, value);
    },

    setValue(o, v, type, opt = {}) {
      const { otherKey } = opt;
      const { key } = o;
      // 抛出来的yu原来元素不一致 , 重新定位
      const item = this.list.find((o) => o.key === key);
      setTimeout(() => {
        item[otherKey || 'value'] = v;

        const reInitKeys = ['items'];
        const reInitTypes = ['select'];

        const { type: itemType } = item;
        // 下拉框 items 变动需要重新刷新
        if (reInitKeys.includes(otherKey) && reInitTypes.includes(itemType)) {
          const inst = this.$refs[`${itemType}-${key}`];
          inst.length && inst[0].init();
        }

        this.$forceUpdate();
        type !== 'no-emit' && this.$emit('change', o, v);
      }, 0);
    },

    collectData() {
      return this.list.reduce((p, c) => {
        const { key, value } = c;
        const type = Object.prototype.toString.call(value);
        if (type.includes('Array')) {
          p[key] = value.join(',');
        } else {
          p[key] = value;
        }

        return p;
      }, {});
    },

    async submit() {
      const { collectData, checkVaild } = this;

      setTimeout(() => {
        if (uUtils.checkVaild(this.list)) {
          this.$emit('submit', collectData());
        }
      }, 100);
    },
  },
};
</script>

<style lang="scss" scoped>
.page {
  padding-top: 20upx;

  .uni-list::before {
    background: #fff;
  }

  .uni-list {
    &.uni-list-mb {
      margin-bottom: 20upx;
    }

    .uni-list-title {
      font-size: 32upx;
      line-height: 45upx;
      padding: 20upx 30upx;
      border-bottom: 2upx solid $uni-border-color;
      font-weight: 500;
      border-top: none;
    }

    .uni-list-cell {
      justify-content: end;
      box-sizing: border-box;

      .left10 {
        margin-left: 20upx;
      }
      label {
        width: 100%;
      }
    }

    .uni-list-cell-pd {
      padding: 18upx 30upx;
    }
  }

  .uni-radio-wrapper {
    .uni-radio-input {
      width: 36upx;
      height: 36upx;
      border: 1px solid $uni-border-color;
      margin-right: 20upx;
    }
  }

  .see-result {
    padding: 30upx;

    button {
      background: $body-main-active-color;
      color: #fff;

      &.circle-btn {
        border-radius: 200upx;
      }
    }
  }

  .real-top {
    // min-height: 56upx;
    background: rgba(255, 163, 78, 0.0706);
    text-align: left;
    color: #ff8053;
    font-size: 28upx;
  }
}
</style>
